<template>
  <div :class="$style.wrap">
    <el-row v-show="data.length>0" :class="$style.seatChartList" :gutter="gutter">
      <el-col v-for="(d, i) in data" :key="i" :span="span">
        <div
          :class="[$style.item, { [$style.selected]: d.selected }]"
          @click="selectHandle(d)"
        >
          <div :class="$style.content">
            <p>工号：{{ d.workno }}</p>
            <p>姓名：{{ d.staffName||d.name }}</p>
          </div>
          <div :class="$style.status">
            <!-- <span>状态：</span> -->
            <span :style="statusColor(d.status)">{{ statusText(d) }}</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-show="data.length <= 0" :class="$style.none">
      暂无数据
    </div>
  </div>
</template>
<script>
export default {
  name: 'SeatChartList',
  components: {},
  props: {
    span: {
      type: Number,
      default: 3
    },
    gutter: {
      type: Number,
      default: 12
    },
    data: {
      type: Array,
      default: () => []
    },
    value: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
    }
  },
  watch: {
    data() {
      this.cancelSelected()
    }
  },
  created() {
    this.cancelSelected()
  },
  methods: {
    // 取消所有选择
    cancelSelected() {
      for (const item of this.data) {
        this.$set(item, 'selected', false)
      }
      this.$emit('on-click', [])
      this.$emit('input', [])
    },
    // 选择
    selectHandle(item) {
      // 标记是否被选中
      this.selectStatus(item)
      const s = this.data.filter(e => e.selected)
      this.$emit('on-click', s)
      this.$emit('input', s)
      // if (item.selected) {
      //   this.$emit('on-click', item)
      //   this.$emit('input', item)
      // } else {
      //   this.$emit('on-click', {})
      //   this.$emit('input', {})
      // }
    },
    // 标记是否选择
    selectStatus(item) {
      if (item.selected) {
        this.$set(item, 'selected', false)
        return
      }
      if (!this.multiple) {
        for (const d of this.data) {
          this.$set(d, 'selected', false)
        }
      }
      this.$set(item, 'selected', true)
    },
    // StatusText
    statusText(item) {
      return this.$cps.getStatusText(item.status)
    },
    // 状态颜色
    statusColor(status) {
      const color = status === 4 ? '#16bc83' : (status === 3 ? 'red' : '#FF9820')
      return {
        color: `${color} !important`
      }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.wrap{
  border: 1px solid #EBEEF5;
  border-radius: 4px;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  // box-shadow: 0 0 4px 4px #EBEEF5;
  overflow: hidden;
}
.seatChartList {
  .item {
    border: 1px solid #EBEEF5;
    border-radius: 4px;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    margin-bottom: 10px;
    .content {
      & > p {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.65);
        margin: 0;
      }
      & > p:nth-of-type(2) {
        padding: 10px 0;
        color: rgba(67, 72, 255, 1);
      }
    }
  }
  .selected {
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
.pagination {
  @include flex($justify: flex-end);
}
.none {
  text-align: center;
  font-size: 12px;
  height: 60px;
  line-height: 60px;
  color: #909399;
  margin-top: -10px;
  // border-top: 1px solid #EBEEF5;
  // border-bottom: 1px solid #EBEEF5;
}
.status{
  @include flex($align:center);
  color: rgba(0, 0, 0, 0.65);
}
</style>
